<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="style/fjol_style.css" />
	</head>

	<body>
		
		      <div id="pullrefresh" class="mui-scroll-wrapper" style="z-index: 0;">
		          <div class="mui-scroll">
		              <!--这里放置真实显示的DOM内容-->
		              <ul class="mui-table-view house-list-con" id="houseList">
		                 
		              </ul>
		          </div>
		      </div>
		      
		<script src="js/mui.min.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/network.js"></script>
		<script>
			mui.init(
			{
				pullRefresh: {
					container: '#pullrefresh',
					down: {
//						contentrefresh: '正在刷新...',
						callback: pulldownRefresh
					},
					up: {
//						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
		mui.plusReady(function(){
				
			dataLoad();

			});

			/**
			 * 下拉刷新具体业务实现
			 */

			var pageValue =1;
			function pulldownRefresh() {
//				console.log('pulldown');
				setTimeout(function(){
					dataLoad();
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
					return pageValue = 1;
				},1000);
				
			}	
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */

			function pullupRefresh() {
				setTimeout(function() {

				pageValue++;
//				var count;
				console.log(pageValue);
//					mui('#pullrefresh').pullRefresh().endPullupToRefresh((count==0));
				
					var recommendParam = [{
						key:'page',
						value:pageValue
					},{
						key:'rows',
						value:10
					}];
					fjNetwork.get('fjzx/common/searchHouseList.json',recommendParam,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					
//					count = rows.length;
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((rows.length==0)); //参数为true代表没有更多数据了。
					
					var recommendList = document.querySelector('#houseList');
					var recommendArr = new Array();
					for (i in rows) {
						var li = document.createElement('li');	//创建一个li标签
						li.className = 'mui-table-view-cell';	//设置class
						li.setAttribute('id',rows[i].id);
						var totalPrice = Math.round(rows[i].totalPrice/10000);
						var bedRoomNumber = rows[i].bedRoomNumber;
						var livingRoomNumber = rows[i].livingRoomNumber;
						var keywords = rows[i].keyword.split(',');
//						recommendArr.push('<li class="mui-table-view-cell" id="'+rows[i].id+'">');
				        recommendArr.push('<a href="javascript:;" class="mui-navigate-right" style="padding-right:20px;">');
				            recommendArr.push('<img class="mui-pull-left mr5" width="100" height="80" src="'+rows[i].coverImage+'">');
				            recommendArr.push('<div class="mui-media-body">');
				               recommendArr.push(' <h4>'+rows[i].title+'</h4>');
				                recommendArr.push('<div class="mui-clearfix">');
				                	recommendArr.push('<span class="mui-badge mui-badge-success mui-badge-inverted f14 mui-pull-right">'+totalPrice+'万</span>');
				                	recommendArr.push('<div>');
				                		recommendArr.push('<p class="mui-ellipsis">'+bedRoomNumber+'室'+livingRoomNumber+'厅'+rows[i].square+'平</p>');
				                		for (var j in keywords) {
				                			recommendArr.push('<button type="button" class="mui-badge color02b260 mr5">'+keywords[j]+'</button>');
				                		}
				                	recommendArr.push('</div>');
				                recommendArr.push('</div>');
				            recommendArr.push('</div>');
				        recommendArr.push('</a>');
//				    recommendArr.push('</li>');
					li.innerHTML = recommendArr.join('');
					recommendList.appendChild(li);
					}
					mui('#houseList li').each(function(){
						this.addEventListener('tap',function(){
//							console.log(this.getAttribute('id'));
							mui.openWindow({
								url:'house_detail.html',
								id:'house_detail',
								extras:{
									houseId:this.getAttribute('id')
								}
							})
						});
					
				});
				
				},function(msg){
					mui.toast(msg);
				});
				
				},1000);
			}
		function dataLoad(){

					var recommendParam = [{
						key:'page',
						value:1
					},{
						key:'rows',
						value:10
					}];
					fjNetwork.get('fjzx/client/house-recommend-list.json',recommendParam,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					var recommendList = document.querySelector('#houseList');
					var recommendArr = new Array();
					for (i in rows) {
						var totalPrice = Math.round(rows[i].totalPrice/10000);
						var bedRoomNumber = rows[i].bedRoomNumber;
						var livingRoomNumber = rows[i].livingRoomNumber;
						var keywords = rows[i].keyword.split(',');
						recommendArr.push('<li class="mui-table-view-cell" id="'+rows[i].id+'">');
				        recommendArr.push('<a href="javascript:;" class="mui-navigate-right" style="padding-right:20px;">');
				            recommendArr.push('<img class="mui-pull-left mr5" width="100" height="80" src="'+rows[i].coverImage+'">');
				            recommendArr.push('<div class="mui-media-body">');
				               recommendArr.push(' <h4>'+rows[i].title+'</h4>');
				                recommendArr.push('<div class="mui-clearfix">');
				                	recommendArr.push('<span class="mui-badge mui-badge-success mui-badge-inverted f14 mui-pull-right">'+totalPrice+'万</span>');
				                	recommendArr.push('<div>');
				                		recommendArr.push('<p class="mui-ellipsis">'+bedRoomNumber+'室'+livingRoomNumber+'厅'+rows[i].square+'平</p>');
				                		for (var j in keywords) {
				                			recommendArr.push('<button type="button" class="mui-badge color02b260 mr5">'+keywords[j]+'</button>');
				                		}
				                	recommendArr.push('</div>');
				                recommendArr.push('</div>');
				            recommendArr.push('</div>');
				        recommendArr.push('</a>');
				    recommendArr.push('</li>');
					}
					recommendList.innerHTML = recommendArr.join('');
					
					
					mui('#houseList li').each(function(){
						this.addEventListener('tap',function(){
//							console.log(this.getAttribute('id'));
							mui.openWindow({
								url:'house_detail.html',
								id:'house_detail',
								extras:{
									houseId:this.getAttribute('id')
								}
							})
						});
					
				});
				
				},function(msg){
					mui.toast(msg);
				});
				}	
		
		</script>
	</body>

</html>